﻿<template>
  <div class="online-info">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户ID">
              <el-input v-model="filterForm.uid" placeholder="请输入用户ID" type="number"></el-input>
            </el-form-item>
            
            <el-form-item label="渠道">
              <el-input v-model="filterForm.channel" placeholder="请输入渠道号" type="number"></el-input>
            </el-form-item>
            
            <div class="action-buttons">
              <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      v-loading="loading"
      class="data-table"
    >
      <el-table-column prop="uid" label="UUID" width="80"></el-table-column>
      <el-table-column prop="account" label="账户" width="120"></el-table-column>
      <el-table-column prop="nick" label="昵称" width="100"></el-table-column>
      <el-table-column prop="total_recharge" label="累计充值" width="100"></el-table-column>
      <el-table-column prop="total_out" label="总发" width="80"></el-table-column>
      <el-table-column prop="total_in" label="总收" width="100"></el-table-column>
      <el-table-column prop="rate_out_in" label="发货比" width="100"></el-table-column>
      <el-table-column prop="remain_value" label="剩余价值" width="120"></el-table-column>
      <el-table-column prop="real_coin" label="真实金币" width="100"></el-table-column>
      <el-table-column prop="coin" label="金币" width="80"></el-table-column>
      <el-table-column prop="before_recharge_coin" label="首充前金币" width="120"></el-table-column>
      <el-table-column prop="vip" label="VIP" width="60"></el-table-column>
      <el-table-column prop="status" label="账号状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.status)">
            {{ scope.row.status === 0 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
      <el-table-column prop="channel" label="渠道" width="80"></el-table-column>
      <el-table-column prop="register_time" label="注册时间" width="150"></el-table-column>
      <el-table-column prop="login_time" label="最近登录时间" width="150"></el-table-column>
      <el-table-column prop="recharge_time" label="最近充值时间" width="150"></el-table-column>
      <el-table-column prop="register_ip" label="注册IP" width="120"></el-table-column>
      <el-table-column prop="login_ip" label="登录IP" width="120"></el-table-column>
      <!-- <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleRecharge(scope.row)">充值</el-button>
          <el-button type="warning" size="mini" @click="handleWithdraw(scope.row)">提现</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { playerOnline } from '@/api/user'

export default {
  name: 'OnlineInfo',
  data() {
    return {
      filterForm: {
        uid: '',
        channel: '',
        registerTime: ''
      },
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    getTagType(status) {
      return status === 0 ? 'success' : 'danger'
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    resetFilter() {
      this.filterForm = {
        uid: '',
        channel: '',
        registerTime: ''
      }
      this.currentPage = 1
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    async fetchData() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          page_size: this.pageSize,
          uid: this.filterForm.uid ? parseInt(this.filterForm.uid) : 0,
          channel: this.filterForm.channel ? parseInt(this.filterForm.channel) : 0
        }
        
        const response = await playerOnline(params)
        
        if (response.code === 0) {
          this.tableData = response.data.players || []
          this.total = response.data.total_page * this.pageSize || 0
        } else {
          this.$message.error(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('获取在线信息失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },
    handleRecharge(row) {
      this.$message.info(`充值操作: ${row.account}`)
      // 这里可以实现充值逻辑
    },
    handleWithdraw(row) {
      this.$message.info(`提现操作: ${row.account}`)
      // 这里可以实现提现逻辑
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.online-info {
  padding: 20px;
}

.filter-section {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.action-buttons {
  display: inline-block;
  margin-left: 10px;
}

.data-table {
  margin-top: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
